{% extends 'base.html' %}
{% block title %} 个人信息 {% endblock %}

{% block mycss %}
    <style>
        .nick {
            position: relative;
        }
        .usernameinput {
            position: absolute;
            top: 8px;
            left: 6px;
            display: none;
        }
        .errormesage {
            float: right;
            color: red;
            display: none;
        }
        .errormesages {
            float: right;
            color: red;
            display: none;
        }
        .nick1 {
            position: relative;
        }
        .usernameinput1 {
            position: absolute;
            top: 8px;
            left: 6px;
            display: none;
        }
        .nick2 {
            position: relative;
        }
        .usernameinput2 {
            position: absolute;
            top: 8px;
            left: 6px;
            display: none;
        }

    </style>
{% endblock %}
{% block bodycontent %}
    <div class="container">
        <table class="table table-bordered">
            {#            用户名#}
            <tr>
                <td>用户昵称</td>
                <td class="nick">
                    <span class="username"><a href="#" style="color: deepskyblue">{{ user.uname }}</a></span>
                    <input class="usernameinput" type="text" name="usernameInput" value="{{ user.uname }}">

                    <span class="errormesage">用户名重复</span>
                </td>
            </tr>
            {#            密码#}
            <tr>
                <td>密码</td>
                <td class="nick1">
                    <span class="userpsw"><a href="#" style="color: deepskyblue">{{ user.upsw }}</a></span>
                    <input class="usernameinput1" type="text" name="usernameInput" value="{{ user.upsw }}">

                </td>
            </tr>
            {#            手机号#}
            <tr>
                <td>手机号</td>
                <td class="nick2">
                    <span class="userphone"><a href="#" style="color: deepskyblue">{{ user.uphone }}</a></span>
                    <input class="usernameinput2" type="text" name="usernameInput" value="{{ user.uphone }}">

                    <span class="errormesages">手机号重复</span>
                </td>
            </tr>
            {#            我的博客#}
            <tr>
                <td colspan="2"><a href="{{ url_for('user.myarticle') }}">我的博客</a></td>
            </tr>
            {#            我的评论#}
            <tr>
                <td colspan="2"><a href="{{ url_for('user.mycomment') }}">我的评论</a></td>
            </tr>

        </table>
    </div>
{% endblock %}

{% block myjs %}
    <script>
        $(function () {
            {#修改用户名#}
            $('.username').click(function () {
                $(this).css('display','none')
                $('.usernameinput').css('display','inline')
            })
            {#输入框输入内容结束后，失去焦点之后提交新的用户名#}
            $('.usernameinput').blur(function () {
                {#发送修改昵称的请求#}
                $.ajax({
                    url:"{{ url_for('user.changename') }}",
                    data:{
                        username:$('.usernameinput').val()
                    },
                    type:'post',
                    success:function (response, status) {
                        {#console.log(response)#}
                        if (response.code == 2002) {
                            $('.errormesage').css('display','inline')
                        }
                        else {
                            $('.errormesage').css('display','none')
                            $('.usernameinput').css('display','none')
                            $('.username').css('display','block')
                            $('.username').text($('.usernameinput').val())
                            $('.welcome').text('欢迎:' + $('.usernameinput').val())
                        }
                    }
                })
            })

            {#修改密码#}
            $('.userpsw').click(function () {
                $(this).css('display','none')
                $('.usernameinput1').css('display','inline')
            })
            {#输入框输入内容结束后，失去焦点之后提交新的密码#}
            $('.usernameinput1').blur(function () {
                {#发送修改密码的请求#}
                $.ajax({
                    url:"{{ url_for('user.changepsw') }}",
                    data:{
                        username:'{{ user.uname }}',
                        upsw:$('.usernameinput1').val()
                    },
                    type:'post',
                    success:function (response, status) {
                        console.log(response)
                        if (response.code == 2001) {
                            $('.userpaw').text($('usernameinput1').val())
                            $('.usernameinput1').css('display','none')
                            $('.userpsw').css('display','block')
                        }

                    }
                })
            })

            {#修改手机号#}
            $('.userphone').click(function () {
                $(this).css('display','none')
                $('.usernameinput2').css('display','inline')
            })
            {#输入框输入内容结束后，失去焦点之后提交新的用户名#}
            $('.usernameinput2').blur(function () {
                {#发送修改手机号的请求#}
                $.ajax({
                    url:"{{ url_for('user.phone') }}",
                    data:{
                        uname:'{{ user.uname }}',
                        uphone:$('.usernameinput2').val()
                    },
                    type:'post',
                    success:function (response, status) {
                        console.log(response)
                        if (response.data == 2000) {
                            $('.errormesages').css('display','block')
                        }
                        else if(response.data == 2001){
                            $('.errormesages').css('display','none')
                            $('.usernameinput2').css('display','none')
                            $('.userphone').css('display','block')
                            $('.userphone').text($('.usernameinput2').val())
                        }
                        else {
                            $('.usernameinput2').css('display','none')
                            $('.userphone').css('display','block')
                        }
                    }
                })
            })
        })
    </script>
{% endblock %}